<template>
  <div>
    <a-modal v-model:visible="visible">
      <template #title> 出库 </template>
      <a-form :model="form" :rules="rules" ref="formRef" @submit="handleSubmit">
        <a-form-item field="manage_product_name" label="出库产品">
          <a-input v-model="form.manage_product_name" readonly> </a-input>
        </a-form-item>
        <a-form-item field="manage_product_guige" label="规格">
          <a-input v-model="form.manage_product_guige" readonly> </a-input>
        </a-form-item>
        <a-form-item field="num" label="剩余库存">
          <a-input v-model="form.num" readonly> </a-input>
        </a-form-item>
        <a-form-item field="out_num" label="出库数量">
          <a-input
            v-model="form.out_num"
            type="number"
            :placeholder="`最多可出库${form.num}`"
          >
            <template #append> 箱 </template>
          </a-input>
        </a-form-item>
        <a-form-item field="out_date" label="出库时间">
          <a-date-picker
            show-time
            style="width: 100%"
            v-model="form.out_date"
            placeholder="请选择出库时间"
          />
        </a-form-item>
        <a-form-item field="dep_people" label="领料人">
          <a-input v-model="form.dep_people" placeholder="请输入领料人">
          </a-input>
        </a-form-item>
        <a-form-item field="dep_name" label="领料部门">
          <a-input v-model="form.dep_name" placeholder="请输入领料部门">
          </a-input>
        </a-form-item>
        <a-form-item field="house_id" label="库管">
          <a-select
            :placeholder="'请选择库管---' + manageGonghuoList.length + '名'"
            v-model="form.house_id"
            allow-clear
          >
            <a-option
              v-for="(item, i) in manageGonghuoList"
              :key="i"
              v-model="item.house_id"
              :value="item.id"
              :label="item.house_name"
            ></a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="address_id" label="存放地点">
          <a-select
            :placeholder="'请选择存放地点---' + manageAddressList.length + '处'"
            v-model="form.address_id"
            allow-clear
          >
            <a-option
              v-for="(item, i) in manageAddressList"
              :key="i"
              v-model="item.address_id"
              :value="item.id"
              :label="item.manage_address"
            ></a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="out_remark" label="备注">
          <a-textarea
            v-model="form.out_remark"
            placeholder="请输入备注"
            allow-clear
            show-word-limit
            :max-length="200"
          />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button type="primary" @click="saveOutData">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { baocaiOut } from '@/api/storeroom';
import { Message } from '@arco-design/web-vue';

const visible = ref(false);
const saveRecord = ref(null);
const formRef = ref(null);
const saveOutData = async () => {
  formRef.value.validate().then(async (res) => {
    if (res === undefined) {
      const { data, code, message } = await baocaiOut(form);
      if (code === 200) {
        saveRecord.value.num = saveRecord.value.num - data;
        Message.success(message);
        visible.value = false;
        props.getOutListAgain();
      }
    }
  });
};
const props = defineProps({
  getProductName: { type: Function },
  getGuige: { type: Function },
  getNum: { type: Function },
  manageGonghuoList: { type: Array },
  manageAddressList: { type: Array },
  getOutListAgain: { type: Function },
});
const openDialog = (record) => {
  saveRecord.value = record;
  form.product_name_id = record.manage_product_id;
  form.manage_product_name = props.getProductName(record.manage_product_id);
  form.manage_product_guige = props.getGuige(record.manage_product_id);
  form.num = props.getNum(record.manage_product_id, record.num);
  form.out_num = '';
  form.out_date = '';
  form.dep_name = '';
  form.dep_people = '';
  form.house_id = '';
  form.address_id = '';
  form.out_remark = '';
  visible.value = true;
};
const handleSubmit = (data) => {
  visible.value = true;
};
const rules = {
  out_num: [
    {
      required: true,
      message: '请输入出库数量',
    },
  ],
  out_date: [
    {
      required: true,
      message: '请选择出库时间',
    },
  ],
  dep_name: [
    {
      required: true,
      message: '请选择领料部门',
    },
  ],
  dep_people: [
    {
      required: true,
      message: '请选择领料人',
    },
  ],
  house_id: [
    {
      required: true,
      message: '请选择库管',
    },
  ],
  address_id: [
    {
      required: true,
      message: '请选择存放地点',
    },
  ],
};
const form = reactive({
  product_name_id: '',
  manage_product_name: '',
  manage_product_guige: '',
  num: '',
  out_num: '',
  out_date: '',
  dep_name: '',
  dep_people: '',
  house_id: '',
  address_id: '',
  out_remark: '',
});
defineExpose({
  openDialog,
});
</script>

<style lang="less" scoped></style>